﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://lib.sinaapp.com/js/bootstrap/latest/css/bootstrap.min.css"/>

<title>微信公众平台接口调试</title>
</head>
<body >
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h3>
				微信公众平台接口调试工具
			</h3>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-7 column">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">
						模拟发送
					</h3>
				</div>
				<div class="panel-body">
					<form action="" method="get" class="form-horizontal">
                    <div class="form-group">
                        <label for="url" class="col-sm-2 control-label">接口地址</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="url" placeholder="http://" value="http://localhost:8080/wechat/weixin" />
                        </div>
                      </div>
                    <!--
                    <div class="form-group">
                        <label for="token" class="col-sm-2 control-label">Token</label>
                        <div class="col-sm-10">
                          <input type="text" class="form-control" id="token" placeholder="您接口设置的token" />
                        </div>
                      </div>
                    -->
                    <div class="form-group">
                        <label for="token" class="col-sm-2 control-label">消息类型</label>
                        <div class="col-sm-10">
                          	<div class="radio-inline"><input type="radio" name="type" value="text" id="type_text" onclick="toggle('text')" checked="checked" /><label for="type_text">&nbsp;文本</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="image" id="type_image" onclick="toggle('image')" /><label for="type_image">&nbsp;图片</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="location" id="type_location" onclick="toggle('location')" /><label for="type_location">&nbsp;位置</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="link" id="type_link" onclick="toggle('link')" /><label for="type_link">&nbsp;链接</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="event" id="type_event" onclick="toggle('event')" /><label for="type_event">&nbsp;菜单</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="subscribe" id="type_subscribe" onclick="toggle('subscribe')" /><label for="type_subscribe">&nbsp;关注</label></div>
			                <div class="radio-inline"><input type="radio" name="type" value="unsubscribe" id="type_unsubscribe" onclick="toggle('unsubscribe')" /><label for="type_unsubscribe">&nbsp;取消关注</label></div>
                        </div>
                      </div>
                    <div class="form-group">
                        <label for="token" class="col-sm-2 control-label">发送用户</label>
                        <div class="col-sm-4">
                          <input type="text" id="fromuser" value="fromUser" class="form-control" />
                        </div>
                        <label for="token" class="col-sm-2 control-label">接收用户</label>
                        <div class="col-sm-4">
                          <input type="text" id="touser" value="toUser" class="form-control" />
                        </div>
                      </div>
                    <div class="form-group test-content" id="content_text">
                        <label for="token" class="col-sm-2 control-label">测试内容</label>
                        <div class="col-sm-10">
                          <textarea id="contentvalue" rows="5" cols="50" class="form-control"></textarea>
                        </div>
                      </div>
                    <div class="form-group test-content" id="content_image">
                        <label for="token" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                          <input type="text" id="picurl" value="http://www.baidu.com/img/bdlogo.gif" class="form-control" />
                        </div>
                      </div>
                    <div class="form-group test-content" id="content_location">
                        <label for="token" class="col-sm-2 control-label">X坐标</label>
                        <div class="col-sm-4">
                          <input type="text" id="location_x" class="form-control" value="23.134521" />
                        </div>
                        <label for="token" class="col-sm-2 control-label">Y坐标</label>
                        <div class="col-sm-4">
                          <input type="text" id="location_y" class="form-control" value="113.358803" />
                        </div>
                      </div>
                    <div class="form-group test-content" id="content_link">
                        <label for="token" class="col-sm-2 control-label">链接</label>
                        <div class="col-sm-10">
                          <input type="text" id="Text1" class="form-control" value="http://baidu.com" />
                        </div>
                      </div>
                    <div class="form-group test-content" id="content_event">
                        <label for="token" class="col-sm-2 control-label">EventKey</label>
                        <div class="col-sm-10">
                          <input type="text" id="event_key" class="form-control" value="EVENTKEY" />
                        </div>
                      </div>
                    <div class="form-group">
                        <label for="token" class="col-sm-2 control-label">发送内容</label>
                        <div class="col-sm-10">
                          <textarea id="sendxml" rows="10" cols="50" class="form-control" readonly="readonly"></textarea>
                        </div>
                      </div>
                     <button type="button" class="btn btn-primary btn-block btn-lg" onclick="submitform()">发送</button>
</form>
				</div>

			</div>
		</div>
		<div class="col-md-5 column">
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">
						返回结果
					</h3>
				</div>
				<div class="panel-body">
					<pre id="receive"></pre>
				</div>
				<div class="panel-footer">
					<button type="button" class="btn btn-link " id="btnClear">清空</button>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
<!--
<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/latest/js/bootstrap.min.js"></script>
-->
<script type="text/javascript">
    var curtype = 'text';
    function toggle(type) {
        curtype = type;
        $('.test-content').css('display', 'none');
        if ($('#content_' + type)[0]) {
            $('#content_' + type).css('display', 'block');
        }
        buildRequest(type);
        $('#receive').text('');
        $('#svposttext').hide();
        $('#svtext').hide();
        $('#svurlbox').hide();
    }

    function getxml(xmlstring) {
        var xmlobject = null;
        try {
            if (window.ActiveXObject) {
                xmlobject = new ActiveXObject("Microsoft.XMLDOM");
                xmlobject.async = "false";
                xmlobject.loadXML(xmlstring);
            } else {// 用于 Mozilla, Firefox, Opera, 等浏览器的代码：
                var parser = new DOMParser();
                xmlobject = parser.parseFromString(xmlstring, "text/xml");
            }
        } catch (e) { alert("您的浏览器不支持模拟测试"); }
        return xmlobject;
    }

    function buildRequest(type) {
        var $demoSendBox = $('#demoSendBox');
        $('span.time', $demoSendBox).show();
        $('div.mediaImg', $demoSendBox).show();
        $('div.mediaContent', $demoSendBox).show();
        $('div.mediaFooterbox', $demoSendBox).show();
        var time = Math.round(new Date().getTime() / 1000);
        xml = "<xml>\n" +
				"<ToUserName><![CDATA[" + $('#touser').val() + "]]></ToUserName>\n" +
			 	"<FromUserName><![CDATA[" + $('#fromuser').val() + "]]></FromUserName>\n" +
			 	"<CreateTime>" + time + "</CreateTime>\n";
        if (type == 'text') {
            xml += "<MsgType><![CDATA[text]]></MsgType>\n";
            xml += "<Content><![CDATA[" + $('#contentvalue').val() + "]]></Content>\n";
            $('#svpostinfo').text($('#contentvalue').val());
        } else if (type == 'image') {
            xml += "<MsgType><![CDATA[image]]></MsgType>\n";
            xml += "<PicUrl><![CDATA[" + $('#picurl').val() + "]]></PicUrl>";
            $('#svpostinfo').html('<img src="' + $('#picurl').val() + '">');
        } else if (type == 'location') {
            xml += "<MsgType><![CDATA[location]]></MsgType>\n";
            xml += "<Location_X>" + parseFloat($('#location_x').val()) + "</Location_X>\n";
            xml += "<Location_Y>" + parseFloat($('#location_y').val()) + "</Location_Y>\n";
            xml += "<Scale>20</Scale>\n";
            xml += "<Label><![CDATA[位置信息]]></Label>\n";
            $('span.time', $demoSendBox).hide();
            $('div.mediaImg', $demoSendBox).hide();
            $('div.mediaContent', $demoSendBox).hide();
            $('#svpostinfo').html('<img src="">');
        } else if (type == 'link') {
            xml += "<MsgType><![CDATA[link]]></MsgType>\n";
            xml += "<Title><![CDATA[测试链接]]></Title>\n";
            xml += "<Description><![CDATA[测试链接描述]]></Description>\n";
            xml += "<Url><![CDATA[" + $('#url').val() + "]]></Url>\n";
        } else if (type == 'subscribe') {
            xml += "<MsgType><![CDATA[event]]></MsgType>\n";
            xml += "<Event><![CDATA[subscribe]]></Event>\n";
            xml += "<EventKey><![CDATA[]]></EventKey>\n";
        } else if (type == 'unsubscribe') {
            xml += "<MsgType><![CDATA[event]]></MsgType>\n";
            xml += "<Event><![CDATA[unsubscribe]]></Event>\n";
            xml += "<EventKey><![CDATA[]]></EventKey>\n";
        } else if (type == 'event') {
            xml += "<MsgType><![CDATA[event]]></MsgType>\n";
            xml += "<Event><![CDATA[CLICK]]></Event>\n";
            xml += "<EventKey><![CDATA[" + $('#event_key').val() + "]]></EventKey>\n";
        }
        xml += "<MsgId>1234567890123456</MsgId>\n" +
		 		"</xml>";
        $('#sendxml').val(xml);
    }
    function submitform() {
        buildRequest(curtype);
        $('#svtext').hide(); $('#svurlbox').hide(); $('#svinfolist').hide();
        $('div.mediaFooterbox', $('#demoSendBox')).show();
        if ($('#url').val() == '') {
            alert('接口地址是必填的，请填写完整地址！');
            return false;
        }
        $.ajax($('#url').val(), {
            type: 'POST',
            headers: { "Content-type": "text/xml" },
            data: $('#sendxml').val().replace(/[\r\n]/g, ""),
            beforeSend: function () {
                if (curtype != 'subscribe' && curtype != 'unsubscribe') {
                    if (curtype == 'text' || curtype == 'image' || curtype == 'location') {
                        $('#svposttext').show();
                    }
                }
                $('#receive').text('加载中。。。');
            }
        }).done(function (s) {
            if (curtype != 'unsubscribe') {
                var xmlobject = getxml(s);
                if (xmlobject) {
                    var xmlobj = xmlobject.getElementsByTagName("xml");
                    if (xmlobj.length) {

                        var xmls = xmlobj.item(0);
                        var xml = xmls;

                        var FromUserName = xml.getElementsByTagName("FromUserName")[0].firstChild.nodeValue;
                        var ToUserName = xml.getElementsByTagName("ToUserName")[0].firstChild.nodeValue;
                        var MsgType = xml.getElementsByTagName("MsgType")[0].firstChild.nodeValue;

                        if (MsgType == 'text') {
                            var Content = xml.getElementsByTagName("Content")[0].firstChild.nodeValue;
                            $('#svtext').show().find('div.btn').html(Content);
                        } else if (MsgType == 'news') {
                            var Title = xml.getElementsByTagName("Title")[0].firstChild.nodeValue;
                            var Description = xml.getElementsByTagName("Description")[0].firstChild.nodeValue;
                            var PicUrl = xml.getElementsByTagName("PicUrl")[0].firstChild.nodeValue;
                            var Url = xml.getElementsByTagName("Url")[0].firstChild.nodeValue;
                            $('#svtitle').html(Title);
                            $('#svinfo').html(Description);
                            $('#svpic').attr('src', PicUrl);
                            $('#svurlbox').show().find('a#svurl').attr('href', Url);
                            var titleObj = xml.getElementsByTagName("Title");
                            if (titleObj.length > 1) {
                                var svinfolist = imghtml = '';
                                var UrlObj = xml.getElementsByTagName("Url");
                                var PicUrlObj = xml.getElementsByTagName("PicUrl");
                                for (var ti = 1; ti < titleObj.length; ti++) {
                                    imghtml = PicUrlObj[ti].firstChild.nodeValue ? '<img align="right" src="' + PicUrlObj[ti].firstChild.nodeValue + '">' : '';
                                    svinfolist += '<p class="clearfix" onclick="popensvurl(\'' + UrlObj[ti].firstChild.nodeValue + '\')">' + titleObj[ti].firstChild.nodeValue + imghtml + '</p>';
                                }
                                $('div.mediaFooterbox', $('#demoSendBox')).hide();
                                $('#svinfolist').show().html(svinfolist);
                            }
                        }
                    }
                }

                $('#receive').text(s);
            } else {
                $('#receive').text('模拟取消关注成功');
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            $('#receive').text('error:' + textStatus);
        });
    }

    toggle(curtype);

    $('#btnClear').click(function () {
        $('#receive').empty();
    });
</script>

	<div class="emotions" style="display:none;"></div>
</body>
</html>